<template>
  <div class="index">
    <!-- right-text="退出登录" @click-right="logout" -->
    <div>
      <van-nav-bar :title="time" class="time" />
    </div>
    <!-- banner -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image.img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 查看成绩 -->
    <div class="scro" @click="scro">个人成绩</div>
    <!-- 每日一练 -->
    <div>
      <div @click="showPopupfl" class="scro">每日一练</div>
      <van-popup v-model="showfl" position="bottom">
        <van-picker title="选择科目" show-toolbar :columns="columns" @confirm="onConfirmfl" @cancel="onCancelfl" @change="onChangefl" />
      </van-popup>
    </div>

    <!--  开始考试 -->
    <div class="kaoshi">
      <van-button round type="info" size="large" @click="showPopup">开始考试</van-button>
      <van-popup v-model="show" position="bottom">
        <van-picker title="选择科目" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { NavBar } from 'vant'
import { Dialog } from 'vant'
import { Toast } from 'vant'
import { Popup } from 'vant'
import { Picker } from 'vant'

export default {
  name: 'Index',
  data() {
    return {
      // 每日一练
      showfl: false,
      // 考试弹出
      show: false,
      // 选择考试科目
      columns: '',
      // 顶部时间
      time: '',
      // banner images
      images: [
        { id: 1, img: require('@/assets/01.jpg') },
        { id: 2, img: require('@/assets/02.jpg') },
        { id: 3, img: require('@/assets/03.jpg') }
      ]
    }
  },
  methods: {
    // 个人成绩页面
    scro() {
      this.$router.push('/sroucIndex')
    },
    // 导航退出
    // logout() {
    //   function beforeClose(action, done) {
    //     if (action === 'confirm') {
    //       setTimeout(done, 1000)
    //       localStorage.clear('id')
    //     } else {
    //       done()
    //     }
    //   }

    //   Dialog.confirm({
    //     title: '标题',
    //     message: '您确定退出吗?',
    //     beforeClose
    //   })
    //     .then(() => {
    //       this.$router.push('/')
    //       Toast.success('退出成功')
    //     })
    //     .catch(() => {})
    // },
    // 设置时间
    getNowTime() {
      var t = new Date()
      var y = t.getFullYear()
      var m = (t.getMonth() + 1).toString().padStart(2, '0')
      var d = t.getDate().toString().padStart(2, '0')
      var h = t.getHours().toString().padStart(2, '0')
      var i = t.getMinutes().toString().padStart(2, '0')
      var s = t.getSeconds().toString().padStart(2, '0')
      return y + '年' + m + '月' + d + '日' + ' ' + h + ':' + i + ':' + s
    },
    // 考试按钮
    showPopup() {
      this.show = true
    },
    getTime() {
      this.time = this.getNowTime()
    },
    // 考试科目
    // 确定考试
    onConfirm(value, index) {
      localStorage.setItem('subject_name', value)
      this.$router.push('/examIndex')
      Toast('开始考试')
    },
    // 选择科目
    onChange(picker, value, index) {},
    // 取消
    onCancel() {
      this.show = false
    },
    // 每日一练
    showPopupfl() {
      this.showfl = true
    },
    onConfirmfl(value, index) {
      localStorage.setItem('subject_name', value)
      this.$router.push('/practice')
      Toast('开始练习')
    },
    // 选择科目
    onChangefl(picker, value, index) {},
    // 取消
    onCancelfl() {
      this.showfl = false
    }
  },
  mounted() {
    // 时间定时器
    setInterval(this.getTime, 1000)
    // 获取科目
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/subject',
      data: {
        major_id: localStorage.getItem('major_id')
      }
    }).then((res) => {
      this.columns = res.data
      // console.log(res)
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.time {
  background-color: rgb(223, 221, 221);
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  width: 100%;
}

.scro {
  margin: 10px;
  font-size: 14px;
  text-align: center;
  line-height: 2rem;
  background-color: rgb(204, 250, 250);
  width: 2rem;
  height: 2rem;
}
.index {
  background-image: url('../assets/tu8.jpg');
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
</style>
